<template>
  <div v-show="visible" id="mapbox-container"></div>
</template>

<script setup>
  import {defineProps, onMounted} from 'vue'
  import mapboxgl from './mapbox.js'
  // import MapboxDraw from '@mapbox/mapbox-gl-draw'
  // import MapboxLanguage from '@mapbox/mapbox-gl-language'

  defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  })
  let map = null
  onMounted(() => {
    map = new mapboxgl.Map({
      container: 'mapbox-container',
      style: 'mapbox://styles/mapbox/streets-v11',
      // style: 'mapbox://styles/mapbox/satellite-streets-v11',
      center: [119.324847, 26.080925],
      zoom: 15.45,
      pitch: 45,
    })
    // mapboxgl.setRTLTextPlugin(
    //   'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'
    // )
    // map.addControl(new MapboxLanguage({defaultLanguage: 'zh-Hans'}))
    map.addControl(new MapboxDraw(), 'bottom-right')
    map.on('load', function () {
      // Start the animation.
      // rotateCamera(0)

      // Add 3d buildings and remove label layers to enhance the map
      const layers = map.getStyle().layers
      for (let i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
          // remove text labels
          // map.removeLayer(layers[i].id)
        }
      }

      map.addLayer({
        id: '3d-buildings',
        source: 'composite',
        'source-layer': 'building',
        filter: ['==', 'extrude', 'true'],
        type: 'fill-extrusion',
        minzoom: 15,
        paint: {
          'fill-extrusion-color': '#aaa',

          // use an 'interpolate' expression to add a smooth transition effect to the
          // buildings as the user zooms in
          'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'height']],
          'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'min_height']],
          'fill-extrusion-opacity': 0.6,
        },
      })
    })
    map.on('click', function (e) {
      console.log('----click----')
      console.log(e.point)
      console.log(e.lngLat)
    })
    map.on('dblclick', function (e) {
      console.log('----dblclick----')
    })
    map.on('wheel', function () {
      console.log('----wheel----')
      console.log(map.getZoom())
    })
  })
</script>

st
<style scoped>
  #mapbox-container {
    width: 100%;
    height: 100%;
  }
</style>
